<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Order Success</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      background: linear-gradient(to bottom, #fdfcfb, #e2d1c3);
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Arial", sans-serif;
      color: #333;
    }

    .container {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
      text-align: center;
      padding: 40px 30px;
      width: 400px;
      max-width: 90%;
      animation: fadeIn 1s ease-in-out;
    }

    .banner-image {
      width: 100%;
      max-height: 180px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .countdown-text {
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }

    #ss {
      display: inline-block;
      font-size: 36px;
      color: #e67e22;
      font-weight: bold;
      margin-top: 10px;
    }

    .redirect-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 20px;
      background: #fccc1c;
      color: #734012;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .redirect-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
      background: #e0b816;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>

<div class="container">
  <!-- 图片展示 -->
  <img th:src="@{/images/banner_south.PNG}" class="banner-image" alt="Order Success"/>

  <!-- 倒计时信息 -->
  <div class="countdown-text">
    下单成功，还有 <span id="ss">5</span> 秒跳转到主页面
  </div>

  <!-- 提前跳转按钮 -->
  <a th:href="@{/cart/clean}" class="redirect-btn">立即跳转</a>
</div>

<script type="text/javascript">
  let count = 5;
  const contextPath = "[[${contextPath}]]"; // 使用Controller传递的变量
  const time = function () {
    count--;
    if (count === 0) {
      window.location.href = contextPath + "/cart/clean"; // 这里改为完整路径
    } else {
      document.getElementById("ss").textContent = count;
      setTimeout(time, 1000);
    }
  };
  time();
</script>

</body>
</html>